<template>
  <div ref='ec' :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from "echarts"
import debounce from '@/utils/debounce'
export default {
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    type: {
      type: String,
      default: 'line'
    },
    selected: {
      type: Object,
      default: null
    },
    zoom: {
      type: Boolean,
      default: true
    },
    linedata: '',
    visualMap: {
      type: Number,
      default: 0
    },
    unit: {
      type: String,
      default: ''
    },
    ecdata: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      color: ["#FF5227", "#FF9200", "#0780ED", "#00AFC3", "#0050E2",],
      // color: ["#00AFC3", "#44D428", "#FF9200", "#B06EF3", "#68C4FD", "#FF5227", "#AE716E", "#0050E2", "#F6D159", "#911FA8"],
      // color: ['#CC0000', '#0066CC', '#00CCCC', '#990066', '#ea9914', '#e7600e', '#006633', '#ADCB13', '#0099FF', '#FFCC33', '#D39188', '#5c2a69', '#5DB85E', '#C40082', '#FF3703', '#D5353F', '#B699BD', '#a02024', '#dd6a24', '#cc3736'],
      chart: null,
      nodes: [
        { "name": "电能" },
        { "name": "蒸汽" },
        { "name": "市电" },
        { "name": "清洁电能光伏" },
        { "name": "清洁电能天然气" },
        { "name": "1#车间" },
        { "name": "2#车间" },
        { "name": "3#车间" },
        { "name": "4#车间" },
        { "name": "5#车间" },
        { "name": "6#车间" },
        { "name": "7#车间" },
        { "name": "8#车间" },
        { "name": "9#车间" },
        { "name": "10#车间" },
        { "name": "3.3Mpa蒸汽" },
        { "name": "1.1Mpa蒸汽" },

      ],
      links: [
        { "source": "电能", "target": "市电", "value": 20 },
        { "source": "电能", "target": "清洁电能光伏", "value": 20 },
        { "source": "电能", "target": "清洁电能天然气", "value": 20 },
        { "source": "蒸汽", "target": "3.3Mpa蒸汽", "value": 20 },
        { "source": "蒸汽", "target": "1.1Mpa蒸汽", "value": 20 },
        { "source": "市电", "target": "1#车间", "value": 2 },
        { "source": "市电", "target": "2#车间", "value": 2 },
        { "source": "市电", "target": "3#车间", "value": 2 },
        { "source": "市电", "target": "4#车间", "value": 2 },
        { "source": "市电", "target": "5#车间", "value": 2 },
        { "source": "市电", "target": "6#车间", "value": 2 },
        { "source": "市电", "target": "7#车间", "value": 2 },
        { "source": "市电", "target": "8#车间", "value": 2 },
        { "source": "市电", "target": "9#车间", "value": 2 },
        { "source": "市电", "target": "10#车间", "value": 2 },
        { "source": "1.1Mpa蒸汽", "target": "1#车间", "value": 2 },
        { "source": "1.1Mpa蒸汽", "target": "2#车间", "value": 2 },
        { "source": "1.1Mpa蒸汽", "target": "3#车间", "value": 2 },
        { "source": "1.1Mpa蒸汽", "target": "4#车间", "value": 2 },
        { "source": "1.1Mpa蒸汽", "target": "5#车间", "value": 2 },
        { "source": "1.1Mpa蒸汽", "target": "6#车间", "value": 2 },
        { "source": "1.1Mpa蒸汽", "target": "7#车间", "value": 2 },
        { "source": "1.1Mpa蒸汽", "target": "8#车间", "value": 2 },
        { "source": "1.1Mpa蒸汽", "target": "9#车间", "value": 2 },
        { "source": "1.1Mpa蒸汽", "target": "10#车间", "value": 2 },
        { "source": "3.3Mpa蒸汽", "target": "8#车间", "value": 6.66 },
        { "source": "3.3Mpa蒸汽", "target": "9#车间", "value": 6.66 },
        { "source": "3.3Mpa蒸汽", "target": "10#车间", "value": 6.66 },
        { "source": "清洁电能天然气", "target": "1#车间", "value": 20 },
      ],
    }
  },
  computed: {
    origin() {
      return this.ecdata
    },
    opt() {

      let that = this
      let opt = {
        // backgroundColor: "#e5e5e5",
        color: this.color,
        // 提示框组件
        tooltip: {
          // 触发类型
          trigger: "item",
          // 提示框添加单位  默认无单位
          // formatter(p) {
          //   console.log(p)
            // var y_name = p[0].name
            // p.forEach((item, index) => {
            //   if (index === that.origin.length) {
            //     return
            //   }
            //   y_name += `<p>${item.marker}${item.seriesName}：${
            //     item.value === undefined ? "-" : item.value
            //     } ${that.unit} </p>`
            // })
            // return y_name
          // },
        // 鼠标悬浮到图上，可以出现标线和刻度文本。
        },
        // 直角坐标系内绘图网格
        grid: {
          // grid 组件离容器左侧的距离。默认10%
          left: 0,
          // grid 组件离容器右侧的距离。默认10%
          right: 0,
          // grid 组件离容器下侧的距离。默认60px。值可以是像60这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
          // bottom: this.zoom ? 80 : 20
        },
  
    
        series: [
          {
            right:'150px',
            left:50,
            type: 'sankey',
            layout: 'none',
            data: that.nodes,
            links: that.links,
            focusNodeAdjacency: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                borderColor: '#aaa'
              }
            },
            lineStyle: {
              normal: {
                curveness: 0.5
              }
            }
          }
        ]
      }
      return opt
    }
  },
  watch: {
    origin() {
      this.chart.setOption(this.opt, true)
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 1)
    window.addEventListener('resize', this.__resizeHanlder)
    const mian = document.getElementById('mian')
    mian.addEventListener('transitionend', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    // window.removeEventListener('resize', this.__resizeHanlder)
    // const mian = document.getElementById('mian')
    // mian.removeEventListener('transitionend', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
  },
  created() {
    // this.r_color = this.rgba_color(this.color)
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.ec)
      this.chart.setOption(this.opt)
    },
    // rgba_color(color) {
    //   var color_arr = []
    //   for (let i = 0; i < color.length ;i++) {
    //     let num = color[i].split("#")[1]
    //     color_arr.push({
    //       a: `rgba(${parseInt("0x" + num.substr(0, 2))},${parseInt(
    //         "0x" + num.substr(2, 2)
    //       )},${parseInt("0x" + num.substr(4, 2))},0.4)`,
    //       b: `rgba(${parseInt("0x" + num.substr(0, 2))},${parseInt(
    //         "0x" + num.substr(2, 2)
    //       )},${parseInt("0x" + num.substr(4, 2))},0.1)`
    //     })
    //   }
    //   return color_arr
    // }
  }

}
</script>
